<template>
	<div
		v-if="showDrawer"
		class="jk-drawer"
		:style="setStyle(drawerState)"
	>
		<header class="jk-drawer-head">
			<span>{{ title }}</span>
			<span class="el-icon-close jk-drawer-close-icon" @click="onCloseBtn"></span>
		</header>
		<section class="jk-drawer-section">
			<slot></slot>
		</section>
		<!--<footer class="jk-drawer-footer">
			<el-button size="mini" class="margin-right-10" :type="cancelBtnType" @click="showDrawer = false">{{ cancelBtnText }}</el-button>
			<el-button v-if="showConfirmBtn" size="mini" :type="confirmBtnType" @click="showDrawer = false">{{ confirmBtnText }}</el-button>
		</footer>-->
	</div>
</template>

<script>
    export default {
        name: 'JkKanBanDrawer',
        props: {
            title: {
                type: String,
                default: ''
            },
            direction: {
                type: String,
                default: 'left'
            },
            width: {
                type: String, // 需要带上单位
                default: '30%'
            },
            drawerState: {
                type: Boolean,
                default: false
            },
            showConfirmBtn: {
                type: Boolean,
                default: true
            },
            confirmBtnType: {
                type: String,
                default: 'primary'
            },
            cancelBtnType: {
                type: String,
                default: 'danger'
            },
            confirmBtnText: {
                type: String,
                default: '确定'
            },
            cancelBtnText: {
                type: String,
                default: '取消'
            }
        },
        data() {
            return {
                showDrawer: false
            };
        },
        methods: {
            setStyle() {
                const styleConf = {
                    width: this.width
                };
                styleConf[this.direction] = '0';
                return styleConf;
            },
            onCloseBtn() {
                this.showDrawer = false;
            }
        },
        watch: {
            drawerState(newVal) {
                this.showDrawer = newVal;
            },
            showDrawer(newVal) {
                this.$emit('on-visible-change', newVal);
            }
        }
    };
</script>
<style scoped lang="scss">
$head_height: 48px;
$footer_height: 0px;
.jk-drawer {
    width: 30%;
    height: 100vh;
    position: fixed;
    top: 0;
    z-index: 2000;
    box-sizing: border-box;
    border-left: 1px solid rgb(43, 87, 144);
    border-right: 1px solid rgb(43, 87, 144);
    background: #1E1A46;
    .jk-drawer-head {
        height: $head_height;
        border-bottom: 1px solid rgb(43, 87, 144);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        font-size: 16px;
        color: #fff;
        //background: #fff;
        box-sizing: border-box;
        .jk-drawer-close-icon {
            font-size: 20px;
        }
        .jk-drawer-close-icon:hover {
            cursor: pointer;
            color: #2d8cf0;
        }
    }
    .jk-drawer-section {
        height: calc(100% - #{$head_height} - #{$footer_height});
        overflow: auto;
        padding: 12px 16px;
        box-sizing: border-box;
    }
    .jk-drawer-footer {
        height: $footer_height;
        background: #fff;
        display: flex;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }
}
</style>
